<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: CSS Transform Tweening Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script type="text/javascript" src="../src/tweenjs/plugins/CSSPlugin.js"></script>
	<script type="text/javascript" src="../src/tweenjs/plugins/ColorPlugin.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->
<style>
	.box {
		border-radius: 25%;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1vw;
		height: 1vw;
	}
</style>

<script id="editable">

	function init() {
		createjs.CSSPlugin.install();
		createjs.ColorPlugin.install("hsl");
		
		var count = 250;
		while (--count >= 0) {
			// create a new box:
			var box = document.createElement("div");
			box.className = "box";
			document.body.appendChild(box);
			
			// set up initial rotation & position:
			var a = Math.random() * 360, hue=count/300*30+180;
			box.style.transform = "translate(-50%,-50%) rotate(" + a + "deg) translate("+3+"vw, 0px) scale(0.1,0.4)";
			box.style.backgroundColor = "hsla("+(hue|0)+", 100%, 50%, 1)";
			
			// create the tween:
			createjs.Tween.get(box, {loop: -1, bounce:true, reversed:true})
				.to({
						// the * tells it to reuse the corresponding operation from the previous step (ie. "translate(-50%,-50%)"):
						transform:"* rotate(" + (a+Math.random()*90+90) + "deg) translate("+(Math.random()*10+40)+"vw, 0px) scale(4,6)",
						backgroundColor:"hsla("+(hue+120|0)+", 100%, 40%, 0)"
					}, Math.random()*2000+1500|0, createjs.Ease.quadIn);
		}
		
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
	}



</script>
</head>

<body onload="init();" style="background-color:#19101C; overflow:hidden">

<header class="TweenJS">
	<h1>CSS Plugin Transform Example</h1>

	<p>Shows the CSSPlugin in action using transform and ColorPlugin.</p>
</header>

</body>
</html>
